import * as React from 'react';
import { Switch, Route, Link, Redirect, RouteComponentProps } from 'react-router-dom';
import { HeatmapComponent } from '../heatmap/heatmap';


interface Nav {
  name: string;
  link: string;
}

const navs: Nav[] = [
  {
    name: 'menu1',
    link: '/menu1',
  },
];

export const HomeComponent: React.SFC<RouteComponentProps<void>> = () => {
  // tslint:disable-next-line
  const Navs = navs.map(({ name, link }) => {
    return (
      <li key={link} >
        <Link to={link} replace >{name}</Link>
      </li >
    );
  });

  return (
    <>
      <ul >
        {Navs}
      </ul>
      <Switch>
        <Route path="/menu1" component={HeatmapComponent} />
        <Redirect to="/menu1" />
      </Switch>
    </>
  );
};
